<!DOCTYPE html>
<html>
  <head>
    <title>Photo-Hub</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<link href="css/mystyle.css" rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script src="js/hander.js"></script> 
	<script>
		$(document).ready(function(){
			$("#uploadImg").click(function(){
				$("body").css("overflow","hidden");
				var top=$(document).scrollTop();
				var width=$(window).width();
				var height=$(window).height();
				$(".parentDiv").css("top",top).css("width",width).css("height",height);
				$(".parentDiv").css("display","block");
				
			});
			$(".upload_cancle").click(function(){
				$("body").css("overflow","auto");
				$(".parentDiv").css("display","none");
			});
			var userName=getCookie("loginInfo");
			$(".person_info span").html(userName);
			$.ajax({
				url:"CenterController",
				  data:{"operator":"person_init","userName":userName},
				  dataType:"json",
				  success:function(result){
					  if(result.success){
						  delCookie("loginInfo");
						  window.location.href="index.html";
					  }else{
						var $ul=$(".album_show");
						
						for(var i=0;i<result.length;i++){
							var js=result[i];
							var $li=$("<li></li>");
							var $img=$("<img/>");
							$img.attr("src","images/"+js.image);
							var  $input=$("<input type='hidden'>");
							$input.val(js.albumid);
							var $h4=$("<h4></h4>");
							$h4.html(js.album);
							$li.append($img);
							$li.append($input);
							$li.append($h4);
							$ul.append($li);
					  }
						$ul.css("display","block");
					}
				  }
			});
			//为导航栏的每一个li绑定事件
			$(".fn li.albums").click(function(){
				if($(".album_show li").size()==0){
					$.ajax({
						url:"CenterController",
						  data:{"operator":"person_init","userName":userName},
						  dataType:"json",
						  success:function(result){
							  if(result.success){
								  delCookie("loginInfo");
								  window.location.href="index.html";
							  }else{
								var $ul=$(".album_show");
								
								for(var i=0;i<result.length;i++){
									var js=result[i];
									var $li=$("<li></li>");
									var $img=$("<img/>");
									$img.attr("src","images/"+js.image);
									var  $input=$("<input type='hidden'>");
									$input.val(js.albumid);
									var $h4=$("<h4></h4>");
									$h4.html(js.album);
									$li.append($img);
									$li.append($input);
									$li.append($h4);
									$ul.append($li);
							  }
								$ul.css("display","block");
							}
						  }
					});
				}
				$(".fn li.photos").removeClass("stress");
				$(".photo_show").css("display","none");
				$(".fn li.albums").addClass("stress");
				$(".album_show").css("display","block");
				
			});
			$(".fn li.photos").click(function(){
				if($(".photo_show li").size()==0){
					$.ajax({
						url:"CenterController",
						  data:{"operator":"showAllPhotos","userName":userName},
						  dataType:"json",
						  success:function(result){
							  if(result.success){
								  delCookie("loginInfo");
								  window.location.href="index.html";
							  }else{
								var $ul=$(".photo_show");
								for(var i=0;i<result.length;i++){
									var js=result[i];
									var $li=$("<li></li>");
									var $img=$("<img/>");
									$img.attr("src","images/"+js.path);
									var  $input=$("<input type='hidden'>");
									$input.val(js.id);
									var $h4=$("<h4></h4>");
									$h4.html(js.name);
									$li.append($img);
									$li.append($input);
									$li.append($h4);
									$ul.append($li);
							  }
								$ul.css("display","block");
							}
						  }
					});
				}
				$(".fn li.albums").removeClass("stress");
				$(".album_show").css("display","none");
				$(".fn li.photos").addClass("stress");
				$(".photo_show").css("display","block");
				
			});
			
			//为每一个相册绑定事件
			$("body").on("click",".album_show li",function(){
				//alert("click");
			});
		});
		function upload(){
			
			var  value=$("#c_album").val();
			if(value=="-1"){
				$(".up_main ul li .tip").css("visibility","visible");
			}else{
				var $progress=$(".progress");
				$progress.css("display","block");
				var fileObj = document.getElementById("fileup");
				//获取文件选择框的所有文件集合
				var files = fileObj.files;
				//创建formdata对象将文件增加到formdata中
				var form = new FormData();
				//for循环遍历数组获取每个文件
				for (var i = 0; i < files.length; i++) {
					//添加参数到form表单，第一个是提交的参数名，第二个实际要提交的值
					form.append("file" + i, files[i]);
				}
				form.append("album", $("#c_album").val());
				form.append("userName",getCookie("loginInfo"));
				//Ajax做文件上传
				//创建Ajax对象，xmlHttpRequest
				var xhr = new XMLHttpRequest();
				//提交方式，提交目的地，是否异步
				xhr.open("post", "fileUp", true);
				//200代表请求成功
				//监听请求状态
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						//alert(xhr.responseText.trim());
						var result=eval(xhr.responseText.trim());
						var $ul=$(".photo_show");
						for(var i=0;i<result.length;i++){
							var js=result[i];
							var $li=$("<li></li>");
							var $img=$("<img/>");
							$img.attr("src",js.path);
							var  $input=$("<input type='hidden'>");
							$input.val(js.id);
							var $h4=$("<h4></h4>");
							$h4.html(js.name);
							$li.append($img);
							$li.append($input);
							$li.append($h4);
							$ul.prepend($li);
					  }
						$progress.css("display","none");
						$(".parentDiv").css("display","none");
						$("body").css("overflow","auto");
					}

				};
				//获取进度
				xhr.upload.addEventListener("progress",function(event){
					var per=document.getElementById("precent");
					if(event.lengthComputable){
						var precent=Math.round(event.loaded/event.total*100)+"%";
						per.style.width=precent;
						per.innerHTML=precent;
					}
				},false);
				//发送请求
				xhr.send(form);
			}
		}
		function select(){
			var  value=$("#c_album").val();
			if(value==-1){
				$(".up_main ul li .tip").css("visibility","visible");
			}else{
				$(".up_main ul li .tip").css("visibility","hidden");
			}
		}
	</script>
	<style type="text/css">
	body{
			/* background-color: #f8f4e6; */
			position: relative;
		}
		.person{
			width:1150px;
			
			margin: 0 auto;
		}
		.person_header{
			height:200px;
			/* background-color: #d8e698; */
			text-align:center;
			
			
		}
		.person_header span{
			font-family: "Times New Roman";
		    font-size: 45px;
		    color: rgb(0, 199, 138);
		    font-style: italic;
		    display: inline-block;
    		margin-top: 55px;
    		margin-right:20px;
    		padding:5px;
		}
		.person_nav{
			height: 202px;
			/* background-color: #c97586; */
		}
		
		
		.person_img{
			width:202px;
			height:202px;
			background-color: #fff;
			float: left;
			text-align: center;
			border:1px solid #ddd;
			border-bottom: none;
		}
		.person_box{
			float:left;
			height:150px;
			width:948px
		}
		.person_info{
			margin-top:50px;
			height:50px;
			border:1px solid transparent;
			padding: 5px 5px 35px 25px;
    		font-size: 40px;
		}
		.person_fn{
			height:50px;
		}
		.fn{
			list-style: none;
			height:50px;
			padding-left:85px;
		}
		.fn li{
			float:left;
			line-height: 50px;
			font-size: 25px;
    		padding-top: 50px;
    		margin-right:50px;
    		text-transform: uppercase;
    		font-family: "Microsoft YaHei";
    		cursor: pointer;
    		color:rgba(34,34,34,0.5)
		}
		.fn li:HOVER{
			color: rgba(34,34,34,0.8)
		}
		.person_info span{
			color:rgb(93,120,154);
			font-weight: bold;
			
		}
		ul{
			list-style: none;
		}
		.person_body{ 
			border:1px solid #ddd;
			background-color: #fff;
		}
		.person_body .album_show{
			padding-left:10px;
			padding-top:10px;
			overflow: hidden;
			
		}
		.person_body .album_show li{
			width:252px;
			height:255px;
			margin: 10px 15px;
			border:1px solid #ddd; 
			float:left;
			cursor: pointer;
		}
		.person_body .album_show li img{
			width:250px;
			height:208px;
			display:block;
		}
		.person_body .album_show h4{
			    height: 45px;
			    text-align: center;
			    line-height: 45px;
			    font-size: 20px;
			    font-family: "Microsoft YaHei";
		}
		
		.photo_show{
			overflow: hidden;
			padding-left:10px;
			padding-top:10px;
		}
		.person_body .photo_show{
			padding-left:10px;
			padding-top:10px;
			overflow: hidden;
			
		}
		.person_body .photo_show li{
			width:202px;
			height:160px;
			margin: 10px 12px;
			border:1px solid #ddd; 
			float:left;
			cursor: pointer;
		}
		.person_body .photo_show li img{
			width:200px;
			height:130px;
			display:block;
		}
		.person_body .photo_show h4{
			    height: 30px;
			    text-align: center;
			    line-height: 30px;
			    font-size: 14px;
			    font-family: "Microsoft YaHei";
			    margin-bottom: 0;
		}
		.fn .stress{
			color: rgba(34,34,34,0.8)
		}
		.person_fn>a{
		    float: right;
   			background-color: #2D2727;
			color: #fff;
			padding: 10px;
			box-shadow: 2px 2px 5px #000;
			text-decoration: none;
			margin-left: 20px;
     }
	.person_fn>a:hover{
		background-color: #f3f3f2;
		color:#302833;
	}
	
	.parentDiv{
       	display: none;
	    position: absolute;
	   /*  width: 1902px; */
	    border: 1px solid #ddd;
	   /*  height: 1080px; */
	    left: 0px;
	    z-index: 3;
	    background: rgba(200, 194, 190, 0.4);
	    top: 0px;
	}
	.up_main{
		width: 750px;
	    height: 570px;
	    margin: 0 auto;
	    background-color: white;
	    margin-top: 300px;
	    padding:20px;
	}
	.up_main>ul{
	    height: 300px;
    	width: 500px;
    	margin: 30px auto;
    	text-align: center;
    	border: 1px solid #ddd;
    	padding: 20px;
	}
	.up_main>ul>li{
		text-align: center;
	    width:560px;
	    height: 40px;
	    padding: 10px;
	    margin-bottom: 15px;
        margin-top: 10px;
	}
	.up_main div a{
		background-color: rgb(0,199,138);
		color: #fff;
		padding: 10px;
		/*产生阴影*/
		/* box-shadow: 2px 2px 5px #000; */
		text-decoration: none;
		margin-left: 20px;
	}
	.up_main ul div{
		float:  left;
		 margin-left: 124px;
    	margin-top: 20px;
	}
	.upload_cancle{
		background-color: white !important;
		color:#1b242f !important;
	}
	.up_main ul div a:HOVER{
		background-color: rgb(85,85,85);
	}
	.up_main>ul>li input[type='file']{
	    display: block;
        margin: 0 90px;
        border:none;
		outline: none;
	}
	.up_main>ul>li input[type='button']{
		background-color: #2D2727;
			color: #fff;
			padding: 10px;
			box-shadow: 2px 2px 5px #000;
			text-decoration: none;
			margin-left: 20px;
	}
	.up_main ul li .tip{
		 margin-left: 5px;
		  border:1px solid #fff;
		  width:200px;
		  height:20px;
		  color:#eb6ea5;
		  visibility: hidden;
	}
	.progress{
		width: 95%;
		height: 20px;
		border: 1px solid #000;
		margin-top: 20px;
		margin-left: 20px;
		box-shadow:2px 2px 5px #000;
		border-radius:10px; 
	}
	#precent{
		background: green;
		height:20px;
		width: 0%;
		border-radius:10px; 
		text-align: right;
	}
	</style>
  </head>
  <body>
    <div class="header">
      <div class="container">
  	     <div class="logo">
					<h1><a href="index.html">Photo Hub</a></h1>
		 		 </div>
			 <div class="top_right">
			   <ul class="top_right_main">
					<li><a href="register.html">Register</a></li>|
					<li class="login" >
						 <div id="loginContainer"><a href="javascript:;" id="loginButton"><span>Login</span></a>
							  <div id="loginBox">
								  <form id="loginForm">
					                <fieldset id="body">
					                	<fieldset>
					                          <label for="userName">userName</label>
					                          <input type="text" name="userName" id="userName">
					                    </fieldset>
					                    <fieldset>
					                            <label for="password">Password</label>
					                            <input type="password" name="password" id="password">
					                     </fieldset>
					                    <input type="button" id="login" value="Sign in">
					                	<label for="checkbox"><input type="checkbox" id="checkbox" checked=""> <i>Remember me</i></label>
					                	<div class="tip clr"></div>
					            	</fieldset>
					                 <span><a href="forgetPassword.html">Forgot your password?</a></span>
								   </form>
						      </div>
					      </div>
					  </li>
						<li>
						</li>
			   </ul>
				<script type="text/javascript">
							var value=getCookie('loginInfo');
							if(value.trim()!=""){
								$(".top_right_main").html("<li><a href='javascript:;' id='personal'>"+value+"</a></li>"
								+"<li><a href='javascript:;' id='exit'>Exit</a></li>");
								$(".top_right ul li a").css("text-transform","none");
							}
				</script>
			</div>
		  <div class="clearfix"></div>
		</div>
	</div>
	<div class="person">
		<div class="person_header">
			<span>Welcome</span>
			<span>To</span>
			<span>My</span>
			<span>Photo</span>
			<span>Hub</span>
		</div>
		<div class="person_nav">
			<div class="person_img">
				<img src="images/2.jpg" />
			</div>
			<div class="person_box">
				<div class="person_info"><span></span></div>
				<div class="person_fn">
					<ul class="fn">
						<li class="stress albums">album</li>
						<li class="photos">photo</li>
					</ul>
					<a href="javascript:;" id="uploadImg">上传图片</a>
					<div class="parentDiv">
						<div class="up_main">
							<ul>
								<li>
									<input type="file" id="fileup" name="uploadImg" accept="image/*"  multiple="multiple">
								</li>
								<li>
									<select name="album_name" id="c_album"  onchange="select()">
										<option value="-1">please choose album</option>
										<option value="Abstract">Abstract</option>
										<option value="Animals/Wildlife">Animals/Wildlife</option>
										<option value="The Arts">The Arts</option>
										<option value="Backgrounds/Textures">Backgrounds/Textures</option>
										<option value="Beauty/Fashion">Beauty/Fashion</option>
										<option value="Buildings/Landmarks">Buildings/Landmarks</option>
										<option value="Business/Finance">Business/Finance</option>
										<option value="Celebrities">Celebrities</option>
										<option value="Editorial">Editorial</option>
										<option value="Education">Education</option>
										<option value="Food and Drink">Food and Drink</option>
										<option value="Healthcare/Medical">Healthcare/Medical</option>
										<option value="Holidays">Holidays</option>
										<option value="Illustrations/Clip-Art">Illustrations/Clip-Art</option>
										<option value="Industrial">Industrial</option>
										<option value="Interiors">Interiors</option>
										<option value="Miscellaneous">Miscellaneous</option>
										<option value="Model Released Only">Model Released Only</option>
										<option value="Nature">Nature</option>
										<option value="Objects">Objects</option>
										<option value="Parks/Outdoor">Parks/Outdoor</option>
										<option value="People">People</option>
										<option value="Religion">Religion</option>
										<option value="Science">Science</option>
									</select>
									<span class="tip">please choose album</span>
								</li>
								<div><a href="javascript:;" onclick="upload()">UPLOAD</a></div>
							
								<div><a href="javascript:;" class="upload_cancle">CANCLE</a></div>
							</ul>
							<div class="progress" style="display:none">
								<div id="precent"></div>
							</div>
						</div>
						
					</div>
				</div>
			</div>		
		</div>
		<div class="clr"></div>
		<div class="person_body">
			<ul class="album_show" style="display: none;">
				
			</ul>
			<ul class="photo_show" style="display: none;">
				<!-- <li>
					<img/>
					<input type="hidden" value="album_id">
					<h4>ssss</h4>
				</li> -->
		  </ul>
	</div>
</div>
<div class="clr"></div>
<div class="grid_3">
  <div class="container">
  	 <ul id="footer-links">
		<li><a href="#">Terms of Use</a></li>
		<li><a href="#">Royalty Free License</a></li>
		<li><a href="#">Extended License</a></li>
		<li><a href="#">Privacy</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Categories</a></li>
        </ul>        
        <p>Copyright © Photo-Hub. All Rights Reserved</p>
  </div>
 </div>

  </body>
</html>
